<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath(); //web项目的根路径
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>R-Watch智能手环</title>


    <link rel="stylesheet" href="<%=basePath%>static/layui2.4.5/css/layui.css">
    <link rel="stylesheet" href="<%=basePath%>static/font-awesome/css/font-awesome.min.css">
    <!--地图插件-->
    <script src="<%=basePath%>static/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script>
    <script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>
    <script type="text/javascript" src='<%=basePath%>static/leaflet/leaflet.ChineseTmsProviders.js'></script>
    <link rel="stylesheet" href="<%=basePath%>static/mouseRightMenu/mouseRightMenu.css" />
    <script src="<%=basePath%>static/leaflet-tileLayer-baidu-master/src/tileLayer.baidu.js"></script>


    <style type="text/css">
        button, input, optgroup, option, select, textarea,label,dd {
            font-size: 16px;
        }
        label{
            width: 110px;
            padding: 8px 15px;
            height: 38px;
            line-height: 20px;
            border-width: 1px;
            border-style: solid;
            border-radius: 2px 0 0 2px;
            text-align: center;
            background-color: #FBFBFB;
            overflow: hidden;
            box-sizing: border-box;
        }
        .layui-input{
            width:150%;
        }
        /*.content>li>ul>li>a:after{*/
        /*    float: right;*/
        /*    display: block;*/
        /*    padding-right: 25px;*/
        /*}*/
        <%--.content>li>ul>li>a:after {--%>
        <%--    content: "\e65f";--%>
        <%--    display: block;--%>
        <%--    height: 40px;--%>
        <%--    width: 50px;--%>
        <%--    margin-right: 9px;--%>
        <%--    float: right;--%>
        <%--    color: white;--%>
        <%--    background-size:cover;--%>
        <%--    background-image:url('<%=basePath%>static/images/more2.png');--%>
        <%--}--%>
        .layui-btn-container button{
            background-color:#5FB878;
        }
        .layui-form-label{
            font-size:15px;
            width: 25%;
        }
        .nav li{
            width:85px;
        }
        .moniter-tree{
            width:100%;
        }
        .moniter-tree li{
            width:100%;
        }
        .fr{
            float:right;
        }
        dd{
            cursor:pointer;
        }
        .layui-nav-child dd a i:hover{
            color:red;
        }
        .layui-tree li i{
            color: rgba(255,255,255,.7);
            display: none;
        }
        .layui-tree li a cite{
            color: rgba(255,255,255,.7);
        }
        .layui-tree li .layui-tree-spread{
            display: block;
            position: absolute;
            right: 30px;

        }
        .layui-tree li{
            line-height: 45px;
            position: relative;
            background-color: #282b33;
        }
        .layui-tree li ul{
            margin-left: 0;
        }
        .layui-tree li ul a{
            padding-left: 20px;
            background-color: #393d49;
        }
        .layui-tree li a{
            height: 45px;
            border-left: 5px solid transparent;
            box-sizing: border-box;
            width: 100%;
        }
        .layui-tree li a:hover{
            background: #4E5465;
            color: #fff;
            border-left: 5px solid #009688;
        }
        .layui-tree li a.active{
            background: #009688;
        }
        layui-layer-iframe{
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body class="layui-layout-body" style="overflow: auto;">


<div class="layui-collapse" style="overflow: auto;">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">地图浏览添加栅栏</h2>
        <div class="layui-colla-content layui-show">
            <div class="layui-fluid">
                <div class="layui-row">


                    <div class="layui-col-md9 layui-col-sm9 gaode_map" >
                        <div class="pad">
                            <!-- Map will be created here -->
                            <div id="map" class="map"  style="height: 680px;">

                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md9 layui-col-sm9 baidu_map">
                        <div class="pad">
                            <!-- Map will be created here -->
                            <div id="map2" class="map"  style="height: 680px;">

                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md3  layui-col-sm3 layui-btn-container" style="height: 700px;">
                        <div class="layui-row">
                            <form class="layui-form" action=""  style="padding-top: 23px;
    padding-left: 22px;">
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label">坐标经度</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="password" id="lat" required lay-verify="required" placeholder="请输入纬度或者在地图上点击" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux"></div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label">坐标纬度</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="password" id="lng" required lay-verify="required" placeholder="请输入经度或者在地图上点击" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label">范围半径</label>
                                    <div class="layui-input-inline">
                                        <input type="number" step="10" name="password" id="radius" required lay-verify="required" placeholder="请输入半径" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                                </div>

                                <div class="layui-form-item" style="display: inline;" pane>
                                    <label class="layui-form-label">限制设备</label>
                                    <div class="layui-form">
                                        <div class="layui-inline" style="width: 50%;">
                                            <div class="layui-input-inline input" style="width: 100%;">
                                                <select name="modules" lay-verify="required" lay-search="" class="input" id="match">
                                                    <option value="">直接选择或搜索选择</option>
                                                </select>
                                                <div class="layui-form-select input">
                                                    <div class="layui-select-title">
                                                        <input type="text" placeholder="直接选择或搜索选择" value="" class="layui-input inputsearch input">
                                                        <i class="layui-edge" style=" right: -87px;"></i>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <div class="layui-input-block">
                                        <button class="layui-btn" id="showradius">显示半径</button>
                                        <button class="layui-btn add" id="addfence" lay-submit lay-filter="formDemo">添加</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class=" layui-row" >
                            <button class="layui-btn btn_baidu layui-col-md3" ><img src="<%=basePath%>static/images/百度地图.png" height="38" width="38">百度</button>
                            <button class="layui-btn btn_gaode layui-col-md3"><img src="<%=basePath%>static/images/高德地图.png" height="38" width="38">高德</button>
                            <button class="layui-btn btn_full_screen layui-col-md3" style="width:130px;"><i class="layui-icon layui-icon-layer"></i> 全屏</button>

                        </div>

                    </div>


                </div>
            </div>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">电子栅栏</h2>
        <div class="layui-colla-content layui-show" style="padding: 0;">
            <div class="layui-fluid">
                <div class="layui-row">

                    <div class="layui-col-md9  layui-col-sm9 ">
                        <!--设备导航-->
                        <table class="layui-hide" id="fence" lay-filter="test"></table>
                        <script type="text/html" id="fenceDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="<%=basePath%>static/jquery/jquery.min.js"></script>
<script src="<%=basePath%>static/layui2.4.5/layui.js"></script>
<script src="<%= basePath %>static/layui2.4.5/lay/modules/layer.js"></script>
<script>
    var listdata={"id":1};
    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    var l;
    var node=[ //节点
        {
            name: '常用文件夹'
            ,id: 1
            ,alias: 'changyong'
            ,children: [
                {
                    name: '所有未读（设置跳转）'
                    ,id: 11
                    ,href: 'http://www.layui.com/'
                    ,alias: 'weidu'
                }, {
                    name: '置顶邮件'
                    ,id: 12
                }, {
                    name: '标签邮件'
                    ,id: 13
                }
            ]
        },
        {
            name: '我的邮箱'
            ,id: 2
            ,spread: true
            ,children: [
                {
                    name: 'QQ邮箱'
                    ,id: 21
                    ,spread: true
                    ,children: [
                        {
                            name: '收件箱'
                            ,id: 211
                            ,children: [
                                {
                                    name: '所有未读'
                                    ,id: 2111
                                }, {
                                    name: '置顶邮件'
                                    ,id: 2112
                                }, {
                                    name: '标签邮件'
                                    ,id: 2113
                                }
                            ]
                        }, {
                            name: '已发出的邮件'
                            ,id: 212
                        }, {
                            name: '垃圾邮件'
                            ,id: 213
                        }
                    ]
                }, {
                    name: '阿里云邮'
                    ,id: 22
                    ,children: [
                        {
                            name: '收件箱'
                            ,id: 221
                        }, {
                            name: '已发出的邮件'
                            ,id: 222
                        }, {
                            name: '垃圾邮件'
                            ,id: 223
                        }
                    ]
                }
            ]
        }
        ,{
            name: '收藏夹'
            ,id: 3
            ,alias: 'changyong'
            ,children: [
                {
                    name: '爱情动作片'
                    ,id: 31
                    ,alias: 'love'
                }, {
                    name: '技术栈'
                    ,id: 12
                    ,children: [
                        {
                            name: '前端'
                            ,id: 121
                        }
                        ,{
                            name: '全端'
                            ,id: 122
                        }
                    ]
                }
            ]
        }
    ];
    var l={
        "device_manage":"admin",
        "auth":0,
        "manage_device_number":3,
        "device_location":[
            {
                "name":"lijunlin",
                "device_id":123123,
                "device_state":"good",
                "device_power":"100%",
                "device_signal_state":"good",
                "device_time":"2019/5/14/9/46",
                "device_location":{"x":31,"y":117,},
            },
            {
                "name":"lijunlin2",
                "device_id":123124,
                "device_state":"middle",
                "device_power":"50%",
                "device_signal_state":"good",
                "device_time":"2019/5/14/9/46",
                "device_location":{"x":29,"y":117,},
            },
            {
                "name":"lijunlin3",
                "device_id":123125,
                "device_state":"bad",
                "device_power":"1%",
                "device_signal_state":"bad",
                "device_time":"2019/5/14/9/46",
                "device_location":{"x":36,"y":117,},
            },
        ],
    }
    var list_device_marker;
    var listen_loca=[];
    var start_initmap_location=[31.834912, 117.220102];
    var map_gaode;
    var map_baidu;
    var selectid;
    layui.config({
        version: '1554901097999' //为了更新 js 缓存，可忽略
    });
    layui.use('element', function(){
        var element = layui.element;
    });
    var obj;
    layui.config({base: '<%=basePath%>static/mouseRightMenu/'})
    layui.use(['mouseRightMenu','layer','jquery'],function(){
        var mouseRightMenu = layui.mouseRightMenu,layer = layui.layer,$=layui.jquery;
        //右键监听
        $('.map').bind("contextmenu",function(e){


            var data = [listdata];

            var menu_data=[
                {'data':data,'type':1,'title':'显示当前位置'},
                {'data':data,'type':2,'title':'设置栅栏'},
                {'data':data,'type':3,'title':'删除地图上标记'},
                {'data':data,'type':4,'title':'用户历史轨迹'},
            ];
            mouseRightMenu.open(menu_data,false,function(d){
                switch (d.type) {
                    case 1:
                        var params = [] ;
                        $("#lat").val(listen_loca[0]);
                        $("#lng").val(listen_loca[1]);
                        var marker_baidu = L.marker(listen_loca)
                            .addTo(map_baidu)
                            .bindPopup("<b>点击位置:</b><br>"+listen_loca)
                            .openPopup();
                        break;
                    case 2:
                        break;
                    case 3:
                       break;
                    case 4:

                        break;
                }
            })
            return false;
        });


    })
    layui.use(['laypage', 'layer', 'table','element'], function(){
        layer = layui.layer //弹层
            ,table = layui.table //表格
            ,element = layui.element //元素操作

        //执行一个 table 实例
        table.render({
            elem: '#fence'
            ,height: 420
            ,url: '<%= basePath %>monitor/getallfence' //数据接口
            ,title: '电子栅栏'
            ,page: true //开启分页
            ,limits:[5,10]
            ,toolbar: false //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: false //开启合计行
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'fenceId', title: '栅栏id', width:'10%'}
                ,{field: 'deviceName', title: '设备名', width: '10%', sort: true}
                ,{field: 'memberName', title: '用户名', width: '10%', sort: true}
                ,{field: 'latLatitude', title: '经度', width: '10%', sort: true}
                ,{field: 'lngLongitude', title: '纬度', width: '10%', sort: true}
                ,{field: 'radius', title: '半径', width: '10%', sort: true}
                ,{field: 'fenceTime', title: '建立时间', width: '15%', sort: true}
                ,{title:"操作",width: '15%',toolbar: '#fenceDemo'}
            ]]
        });


        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    //向服务端发送删除指令
                    //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    $.ajax({
                        type:"get",
                        url:"<%= basePath %>monitor/subfence",  //数据接口
                        data : {
                            "FenceId":data.fenceId
                        },
                        success:function(result){
                            if(result.success){
                                layer.msg("已删除",{icon:6})
                                $(".layui-laypage-btn").click()

                            }else{
                                layer.alert("删除失败请重试")
                            }
                        },
                        error:function(result){
                            layer.alert("请检查网络连接")
                        }
                    });
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                layer.open({
                    type: 2,
                    area: ['372px', '273px'],
                    content: '<%=basePath%>monitor/edit',
                    success:function(layero,index){
                        var iframe =window['layui-layer-iframe' + index];
                        iframe.child(data);
                    }
                });
            }
        });



    });
    layui.use(['form'], function () {
        var form = layui.form;
        form.on('select', function(data){
            $(".search_selected_member_show").innerHTML = "";
            console.log(data.value); //得到被选中的值]
            selectid=data.value;
        });
    });

    function baidu_map_init(){

        var map2 = L.map('map2', {
            crs: L.CRS.Baidu,
            minZoom: 3,
            maxZoom: 18,
            attributionControl: false,
            center: start_initmap_location,
            zoom: 12
        });


        //控制地图底图
        L.control.layers(
            {
                "百度地图": L.tileLayer.baidu({ layer: 'vec' }).addTo(map2),
                "百度卫星": L.tileLayer.baidu({ layer: 'img' }),
                "百度地图-大字体": L.tileLayer.baidu({ layer: 'vec',bigfont:true }),
                "百度卫星-大字体": L.tileLayer.baidu({ layer: 'img', bigfont: true }),
                "自定义样式-黑色地图": L.tileLayer.baidu({ layer: 'custom', customid:'dark' }),
                "自定义样式-蓝色地图": L.tileLayer.baidu({ layer: 'custom', customid:'midnight' })
            },
            {
                "实时交通信息": L.tileLayer.baidu({ layer: 'time' })
            },
            { position: "topright" }).addTo(map2);
        new L.marker(start_initmap_location).addTo(map2);
        return map2;
    }
    function gaode_map_init(){

        var normalm = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
            maxZoom: 18,
            minZoom: 5
        });
        var imgm = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
            maxZoom: 18,
            minZoom: 5
        });
        var imga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
            maxZoom: 18,
            minZoom: 5
        });

        var normal = L.layerGroup([normalm]),
            image = L.layerGroup([imgm, imga]);

        var baseLayers = {
            "高德地图": normal,
            "高德卫星地图": image,

        }

        var map = L.map("map", {
            center: start_initmap_location,
            zoom: 12,
            layers: [normal],
            zoomControl: false
        });

        L.control.layers(baseLayers, null).addTo(map);
        L.control.zoom({
            zoomInTitle: '放大',
            zoomOutTitle: '缩小'
        }).addTo(map);
        return map;
    }
    function get_distance(A,B){
        var latlng = L.latLng(A[0],A[1]);
        var distance=latlng.distanceTo(L.latLng(B[0],B[1]));
        return distance;
    }
    function draw_distance(Obj){
        var treeCol=new Array();
        for(var i=0;i<Obj.manage_device_number;i++){
            treeCol[i]=new Array();
            for(var j=0;j<Obj.manage_device_number;j++){
                treeCol[i][j]=0;
            }
        }
        for(var i=0;i< Obj.manage_device_number;i++){
            for(var j=0;j<Obj.manage_device_number;j++){
                if(i==j||treeCol[i][j]!=0)
                    continue;
                else{

                    temp=get_distance([Obj.device_location[i].device_location.x,Obj.device_location[i].device_location.y],[Obj.device_location[j].device_location.x,Obj.device_location[j].device_location.y]);
                    treeCol[i][j]=temp;
                    treeCol[j][i]=temp;
                }
            }
        }

        for(var i=0;i<Obj.manage_device_number;i++){
            for(var j=0;j<Obj.manage_device_number;j++){
                if(i==j)
                    continue;
                //alert([Obj.manage_device_number,treeCol[i][j],i,j]);
                var red = parseInt(Math.random()*257).toString(16);
                var blue = parseInt(Math.random()*257).toString(16);
                var green= parseInt(Math.random()*257).toString(16);

                var linecolor = '#'+red+blue+green;

                var polyline = L.polyline([[Obj.device_location[i].device_location.x,Obj.device_location[i].device_location.y],[Obj.device_location[j].device_location.x,Obj.device_location[j].device_location.y]], {color: linecolor}).addTo(map_baidu)
                    .bindPopup("距离为"+treeCol[i][j])
                    .openPopup();

                var polyline = L.polyline([[Obj.device_location[i].device_location.x,Obj.device_location[i].device_location.y],[Obj.device_location[j].device_location.x,Obj.device_location[j].device_location.y]], {color: linecolor}).addTo(map_gaode)
                    .bindPopup("距离为"+treeCol[i][j])
                    .openPopup();
            }

        }
    }
    function draw_marker(Obj){

        var marker_gaode = L.marker([Obj.device_location_x, Obj.device_location_y])
            .addTo(map_gaode)
            .bindPopup("<b>设备名称:"+Obj.name+"</b>"+"<br><b>设备号:"+Obj.device_id+"</b>"+"<br><b>设备电量:"+Obj.device_power+"</b><br>"+"<b>设备状态:"+Obj.device_state+"</b><br><b>设备信号:"+Obj.device_signal_state+"</b><br><b>设备传输时间:"+Obj.device_time+"</b>"
            )
            .openPopup();
        var marker_baidu = L.marker([Obj.device_location_x, Obj.device_location_y])
            .addTo(map_baidu)
            .bindPopup("<b>设备名称:"+Obj.name+"</b>"+"<br><b>设备号:"+Obj.device_id+"</b>"+"<br><b>设备电量:"+Obj.device_power+"</b><br>"+"<b>设备状态:"+Obj.device_state+"</b><br><b>设备信号:"+Obj.device_signal_state+"</b><br><b>设备传输时间:"+Obj.device_time+"</b>"
            )
            .openPopup();
    }
    function get_marker(l){
        for (var i in l.device_location){
            draw_marker(l.device_location[i]);
        }
    }
    $(".btn_baidu").click(function(){
        $(".baidu_map").show();

        $(".gaode_map").hide();
    });
    $(".btn_gaode").click(function(){
        $(".baidu_map").hide();
        $(".gaode_map").show();
    });
    //初始化地图

    <%--function loaddata(l) {--%>
    <%--    $.ajax({--%>
    <%--        type: "post",--%>
    <%--        datatype: "json",--%>
    <%--        url: "<%=basePath %>monitor/loadtodata",--%>
    <%--        contentType : "application/json;charset=utf-8",--%>
    <%--        success: function (data) {--%>
    <%--            if (data.success) {--%>

    <%--                l.device_location = data.body.list;--%>
    <%--                layui.use(['tree', 'layer'], function(){--%>
    <%--                    var layer = layui.layer--%>
    <%--                        ,$ = layui.jquery;--%>
    <%--                    layui.tree({--%>
    <%--                        elem: '#demo1' //指定元素--%>
    <%--                        ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）--%>
    <%--                        ,click: function(item){ //点击节点回调--%>
    <%--                            //layer.msg('当前节名称：'+ item.name + '<br>全部参数：'+ JSON.stringify(item));--%>
    <%--                            //console.log(item);--%>
    <%--                            listdata=[];--%>
    <%--                            listdata=item;--%>

    <%--                        },--%>
    <%--                        nodes: data.body.group--%>
    <%--                    })--%>
    <%--                })--%>


    <%--            }--%>
    <%--        },--%>
    <%--        error: function () {--%>
    <%--            alert("请检查网络连接");--%>
    <%--        }--%>
    <%--    });--%>

    <%--};--%>
    $(".btn_full_screen").click(function(){
        $(".map").css("height",$(window).height());
        $(".map").css("width",$(window).width());

        map_baidu.invalidateSize(true);
        map_gaode.invalidateSize(true);
    });
    $(".btn_device_location_show").click(function(){
        get_marker(l);
    });
    $(".layui-colla-title").click(function(){
        $(".map").css("height","500px");
        $(".map").css("width","100%");
    });
    $(".btn_draw_distance_show").click(function(){
        draw_distance(l);
    });
    $('#radius').on('input propertychange', function() {
        L.circle(listen_loca,{color:'#50acb666',fillColor:'#50acb666',radius:$("#radius").val(),fillOpacity:1}).addTo(map_gaode);
        L.circle(listen_loca,{color:'#50acb666',fillColor:'#50acb666',radius:$("#radius").val(),fillOpacity:1}).addTo(map_baidu);
    });
    $("#showradius").click(function () {
        L.circle(listen_loca,{color:'#50acb666',fillColor:'#50acb666',radius:$("#radius").val(),fillOpacity:1}).addTo(map_baidu);
        L.circle(listen_loca,{color:'#50acb666',fillColor:'#50acb666',radius:$("#radius").val(),fillOpacity:1}).addTo(map_gaode);
    });
    // $(document).ready(function(){
    //     $(".content>li>ul>li>a").append("<i style='    float: right;\n" +
    //         "    display: block;\n" +
    //         "    padding-right: 25px;'>asdasd</i>");
    //
    // });
    //map.removeLayer(marker)删除标记

    $(document).ready(function () {
        getalldevice();
        map_gaode=gaode_map_init();
        $(".gaode_map").hide();
        map_baidu=baidu_map_init();
        map_baidu.on("click", function(e) {
            var lat = e.latlng.lat;
            var lng = e.latlng.lng;
            listen_loca=[lat,lng];
        });


    });
    $("#addfence").click(function () {
        if(selectid==undefined||selectid=="")
        {
            alert("请先确认绑定设备是否正确");
            return false;
        }
        var indata= {
            "ByDevice":selectid,
            "X":$("#lat").val(),
            "Y":$("#lng").val(),
            "Radius":$("#radius").val(),
        }
        //alert(JSON.stringify(indata));
        $.ajax({
            type: "post",
            datatype: "json",
            url: "<%=basePath %>monitor/addfence",
           // contentType : "application/json;charset=utf-8",
            data:{
                "ByDevice":selectid,
                "X":$("#lat").val(),
                "Y":$("#lng").val(),
                "Radius":$("#radius").val(),
            },
            success: function (data) {
                if (data.success) {
                    alert("添加成功")
                }
                else{
                    alert(data.msg);
                }
            },
            error: function () {
                alert("请检查网络连接");
            }
        });
    })
    function getalldevice() {
        //加载数据
        $.ajax({
            type: "post",
            datatype: "json",
            url: "<%=basePath %>monitor/getalldevice",
            contentType : "application/json;charset=utf-8",
            success: function (data) {
                if (data.success) {
                    listop=data.body.list;
                    //alert(JSON.stringify(listop));
                    for (var i = 0; i < listop.length; i++)
                    {
                        $("#match").append("<option value=" +listop[i].deviceId + ">" + listop[i].deviceName + "</option>");
                    }
                }
                else{
                    alert("请先登录！");
                }
            },
            error: function () {
                alert("请检查网络连接");
            }
        });
    }

</script>

</body>


</html>